{layout name="common/basic" /}
<script>
    function showHint(str) {
        var tom;
        if (str < 1) { // code for IE7+, Firefox, Chrome, Opera, Safari
            str = 1;
        }
        if (window.XMLHttpRequest) { // code for IE7+, Firefox, Chrome, Opera, Safari
            tom = new XMLHttpRequest();
        } else {
            // code for IE6, IE5
            tom = new ActiveXObject("Microsoft.XMLHTTP");
        }


        tom.onreadystatechange = function () {


            if (tom.readyState == 4 && tom.status == 200) {
                document.getElementById("txtHint" + str).innerHTML = tom.responseText;
                // 设置下一页
                document.getElementById("next").innerHTML = parseInt(str) + 1;

            }

        }
        tom.open("GET", "/index/ajax/ajax?page=" + str, true);
        tom.send();
    }

    // 当滚动条滚动的时候触发
    window.onscroll = function () {


        // document.documentElement.scrollHeight  页面的滚动高度
        // document.documentElement.scrollTop  和 document.body.scrollTop    滚动条位置
        // document.documentElement.clientHeight 浏览器可视窗口高度


        document.getElementById("look").innerHTML = "";

        if ((document.documentElement.scrollHeight) == (document.documentElement.scrollTop | document.body.scrollTop) + document.documentElement.clientHeight) {

            // alert('已经滚动到底部了');
            showHint(document.getElementById('next').innerHTML);

        }

    }


</script>
<style type="text/css">
    .table {
        margin-bottom: 0px;
    }

    th {
        width: 20%
    }

    .btn-block:focus {
        outline-color: #e6e6e6;
    }
</style>


<div class="panel panel-default">
    <div class="panel-body">


        <table class="table table-striped table-hover ">
            <thead>
            <tr>
                <th> 会员ID</th>
                <th> 昵称</th>
                <th> 城市</th>
                <th> 注册时间</th>
            </tr>
            </thead>

            <tbody>
            {volist name='show' id='user'}

            <tr>
                <th> {$user.id}</th>
                <td>
                    <a href="{:url('index/member/home', ['user_id' => $user.id])}" data-toggle="popover" data-id="{$user.id}">
                        <img style="height: 50px;width: 50px" src="{$user.photo?:'__STATIC__/images/logo.jpg'}" class="brand-image img-circle elevation-3"/>
                        {$user.nickname?$user.nickname:$user.id} </a>
                </td>
                <td> {$user.human.address?:$user.ipinfo.region}</td>
                <td> {$user.create_time}</td>
            </tr>
            {/volist}

            </tbody>

        </table>
        <span id="txtHint2"></span>

        <div id="look"></div>

        <button type="button" class="btn btn-default btn-lg btn-block"
                onclick="showHint(document.getElementById('next').innerHTML)" style="margin-top: 20px;">点击加载更多内容
        </button>
        <span id="next" style="display:none;">2</span>


    </div>
</div>


<!-- <div onclick="showHint(1)">首页</div>

跳转：<input type="text" id="txt1" onblur="showHint(this.value)" />页


<select name="customers" onchange="showHint(this.value)" style="font-family:Verdana, Arial, Helvetica, sans-serif;">
<option value="1">选择页数</option>
<option value="1 ">首页</option>
<option value="5">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
</select> -->

